<template>
  <div>
    <a-modal v-model:open="open" title="查看用户"  @ok="open = false">
      <a-table
        :pagination="pagination"
        @change="tableChange"
        size="small"
        :columns="columns"
        :data-source="data"
      >
      </a-table>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { getRoleUsersApi, type getRoleUsersDataType } from '@/api/role.api.ts'

const open = ref<boolean>(false)

const roleRecord = ref()
const showModal = (record: Record<string, string>[]) => {
  open.value = true
  roleRecord.value = record
  getList()
}

const columns = [
  {
    title: 'Id',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: '账号',
    dataIndex: 'account',
    key: 'name',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
]
const data = ref<getRoleUsersDataType['users']>([])
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})
const tableChange = (pag: { current: number; pageSize: number }) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  getList()
}
const getList = async () => {
  const { users, pagination: pag } = await getRoleUsersApi(roleRecord.value.id, {
    limit: pagination.value.pageSize,
    page: pagination.value.current,
  })
  pagination.value.total = pag.total;
  data.value = users;
}
defineOptions({
  name: 'RoleUsersModal',
})
defineExpose({
  showModal,
})
</script>
